<template>
  <div class="registermian">
    <div class="registerbody">
      <div class="registerbox">
        <span>web资源管理系统</span>
      </div>
    </div>
    <div class="registerform">
      <div class="formbox">
        <div class="formtitle">注册</div>
        <el-form
          class="formitem"
          ref="ruleForm"
          :model="registerList"
          :rules="dataRule"
        >
          <el-form-item class="itme" prop="username">
            <!--            <i class="el-icon-user"></i>-->
            <span>姓名</span>
            <el-input
              placeholder="请输入姓名 "
              v-model="registerList.username"
            ></el-input>
          </el-form-item>
          <el-form-item class="itme" prop="password">
            <!--            <i class="el-icon-lock"></i>-->
            <span>密码</span>
            <el-input
              placeholder="请输入密码"
              type="password"
              v-model="registerList.password"
            ></el-input>
          </el-form-item>
          <el-form-item class="itme" prop="stuNumber">
            <!--            <i class="el-icon-lock"></i>-->
            <span>学号</span>
            <el-input
              placeholder="请输入学号"
              type="string"
              v-model="registerList.stuNumber"
            ></el-input>
          </el-form-item>
          <el-form-item class="itme" >
            <!--            <i class="el-icon-user"></i>-->
            <span>性别</span>
            <el-radio v-model="registerList.gender" label="男">男</el-radio>
            <el-radio v-model="registerList.gender" label="女">女</el-radio>
          </el-form-item>
          <el-form-item class="itme" prop="grade">
            <!--            <i class="el-icon-user"></i>-->
            <span>年级</span>
            <el-input
              placeholder="请输入年级 "
              v-model="registerList.grade"
            ></el-input>
          </el-form-item>
          <el-form-item class="itme" prop="college">
            <!--            <i class="el-icon-user"></i>-->
            <span>学院</span>
            <el-input
              placeholder="请输入学院 "
              v-model="registerList.college"
            ></el-input>
          </el-form-item>
        </el-form>
        <div class="forminput">
          <router-link to="/login" class="register">已有账号！返回登陆 </router-link>
          <el-button type="primary" @click="register()">注册</el-button>
        </div>
      </div>
    </div>
    <div v-on:keyup.enter="register"></div>
  </div>
</template>

<script>
// import { setToken } from '@/utils/auth'
export default {
  data() {
    return {
      registerList: {
        username: '',
        password: '',
        stuNumber: '',
        gender: '',
        grade: '',
        college: ''
      },
      dataRule: {
        username: [
          {
            required: true,
            message: '姓名不能为空',
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: '密码不能为空',
            trigger: 'blur'
          }
        ],
        stuNumber: [
          {
            required: true,
            message: '学号不能为空',
            trigger: 'blur'
          }
        ],
        grade: [
          {
            required: true,
            message: '年级不能为空',
            trigger: 'blur'
          }
        ],
        college: [
          {
            required: true,
            message: '学院不能为空',
            trigger: 'blur'
          }
        ]
      },
      radio: '1'
    }
  },
  methods: {
    register() {
      this.$refs.ruleForm.validate( async (valid) => {
        if (!valid) return;
        const { data: res } = await this.$http.post(
          "http://113.118.193.85:17088/user/register",
          this.registerList
        );
        if (res.status !== 200) return this.$message.error("注册失败!");
        this.$message.success("注册成功!");
        this.$router.push("/login");
      })
    }
  },
  mounted() {
  }
}
</script>
<style scoped>
.registermian {
  background-image: url("./assets/bj.png");
  background-size: 100% 100%;
  position: relative;
  height: 100vh;
}
.registermian .registerbody {
  color: #fff;
  position: absolute;
  height: 110px;
  width: 100%;
  z-index: 99;
}
.registermian .registerbox {
  font-size: 39px;
  /*margin: 0 auto;*/
  writing-mode: horizontal-tb;
  /*height: 500px;*/
  margin-top: 100px;
  text-align: center;
  letter-spacing: 20px;
  /*display: flex;*/
  /*justify-content: space-between;*/
  /*align-items: center;*/
}
.registermian .registerform {
  width: 385px;
  height: 600px;
  background-color: #fff;
  position: absolute;
  z-index: 99;
  top: 57%;
  right: 50%;
  transform: translate(50%, -50%);
  border-radius: 15px;
}
.registermian .registerform .formbox {
  margin: 30px 40px;
  /* height: 100%; */
  position: relative;
}
.registermian .registerform .formbox .formtitle {
  font-size: 26px;
  font-weight: 600;
  height: 60px;
  color: #333;
  text-align: center;
}
.registermian .registerform .formbox .formitem .itme {
  height: 65px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ebebeb;
}
.registermian .registerform .formbox .formitem img {
  cursor: pointer;
  position: absolute;
  bottom: 0;
}
.registermian .registerform .formbox .formitem div span {
  font-weight: 600;
  width: 45px;
  color: #000;
  padding: 0 15px;
  border-right: 1px #ebebeb solid;
}
.register {
  float: right;
  margin-top: 15px;
  margin-right: 15px;
}
.registermian .registerform .formbox .el-button {
  width: 100%;
  /* position: absolute;
  bottom: 60px; */
  margin-top: 30px;
  border-radius: 20px;
}

.registermian .imgshade {
  background-color: rgba(0, 0, 0, 0.8);
  position: absolute;
  width: 100%;
  height: 100%;
}
.registermian .el-carousel {
}
.registermian .el-carousel .backgroundimg {
  width: 100%;
  height: 100%;
}
.registermian .el-carousel__arrow {
  width: 0px;
  height: 0px;
}
.registermian .el-carousel__arrow i {
  display: none;
}
.registermian .el-carousel__indicators--horizontal {
  bottom: 30%;
  transform: translateX(0);
  left: 14%;
}
.registermian
.el-carousel__indicators--horizontal
.el-carousel__indicator--horizontal {
  padding: 12px;
}
.registermian .el-carousel__indicators--horizontal .el-carousel__button {
  width: 55px;
  height: 4px;
}

.registermian .el-input__inner {
  border: 0px;
}
.registermian .el-input {
  width: auto;
}
.registermian .el-form-item {
  margin-bottom: 0px;
}
</style>
